<template>
  <div class="list-box">
    <Card>
      <span slot="title">账号列表</span>
      <div slot="content" class="text item">
        <!-- selection-change: 当选择项发生发生变化时触发该事件 -->
        <el-table :data="acclistData" style="width: 100%" @selection-change="handleSelectionChange" ref="acclist" height="300px">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="account" label="账号" width="180">
          </el-table-column>
          <el-table-column prop="userGroup" label="用户组" width="180">
          </el-table-column>
          <el-table-column prop="ctime" label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :total="totalPage" :page-size="pageSize" :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <div style="margin-top: 20px">
          <el-button size="small" type="danger" @click="batchDelete">批量删除</el-button>
          <el-button size="small" type="primary" @clik="cancelSelection">取消选择</el-button>
        </div>
        <!-- 弹框 -->
        <el-dialog title="信息编辑" :visible.sync="isshow">
          <el-form :model="amendData">
            <el-form-item label="账号">
              <el-input v-model="amendData.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户组">
              <el-select v-model="amendData.userGroup" placeholder="请选择用户组">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="ok" size="medium">确 定</el-button>
          </div>
        </el-dialog>
      </div>

    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  getList_api,
  editAcc_api,
  delAcc_api,
  delAccAll_api,
} from "@/api/user.js";
import moment from "moment";

export default {
  components: {
    Card,
  },

  data() {
    return {
      acclistData: [],
      rowIdArr: [], //选中行元素的id
      currentPage: 1, //当前页数
      totalPage: 0, //总条数
      pageSize: 5, //每页的条数
      pageSizes: [5, 10, 15, 20],
      isshow: false,
      amendData: {
        id: "",
        account: "",
        userGroup: "",
      },
    };
  },
  methods: {
    //选择项发生变化触发事件
    handleSelectionChange(val) {
      //获取id
      this.rowIdArr = val.map((item) => item.id);
      // console.log(this.rowIdArr);
    },
    //编辑  -->index索引号，row-->选中行所对应的元素
    handleEdit(index, row) {
      this.isshow = true; //显示弹框
      this.amendData = { ...row }; //浅拷贝
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("是否要将永久删除该用户？不可逆哦！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await delAcc_api({ id: row.id });
        this.getList();
      });
    },

    //页数发生改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
      // console.log(`当前页: ${val}`);
    },
    //批量删除
    batchDelete() {
      this.$confirm("是否要将永久删除你选中的用户？不可逆哦！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delAccAll_api({ ids: JSON.stringify(this.rowIdArr) });
          console.log(res);
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //取消全选
    cancelSelection() {
      this.$refs.acclist.clearSelection();
    },
    //修改数据，确认
    async ok() {
      this.isshow = false;
      //点击确认，向后台传数据
      let { id, account, userGroup } = this.amendData;

      //修改账号
      await editAcc_api({ id, account, userGroup });
      this.getList();
    },

    //向后端发送数据
    //获取账号列表
    async getList() {
      let res = await getList_api({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      //处理时间格式
      res.data.data.forEach((item) => {
        item.ctime = moment(item.ctime).format("YYYY-MM-DD HH:mm:ss");
      });
      this.acclistData = res.data.data;

      this.totalPage = res.data.total;
      if (res.data.data.length == 0 && this.currentPage > 1) {
        this.currentPage--;
        this.getList();
      }
    },
  },

  //生命周期-->创建后
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-card__body {
  padding-top: 10px;
}
/deep/.el-pagination {
  margin-top: 15px;
}

/deep/.el-dialog {
  width: 500px;
}
.el-form {
  /deep/.el-input {
    width: 220px;
  }
}

/deep/.el-form-item__label {
  width: 80px;
}
</style>